<script setup>
import { ref } from 'vue'
import FormAdd from '@/components/common/formAdd.vue'
import { useRouter } from 'vue-router'
import { enetrpriseApi } from '@/api/login'
import { showStatusMessage } from '@/utils/common/showMessage'
import MAP from '@/components/common/map.vue'
const router = useRouter()
// 添加企业账号表单数据
const form = ref({
  identity: '企业',
  account: '',
  password: '',
  enterpriseName: '',
  enterpriseAddress: '',
  detailAddress: '',
  industry: '',
  detail: '',
  phone: '',
  position:''
})
const studentFormOpt = [
  { label: '身份', type: 'input', prop: 'identity' },
  { label: '账号', type: 'input', prop: 'account' },
  { label: '密码', type: 'password', prop: 'password' },
  { label: '确认密码', type: 'password', prop: 'repassword' },
  { label: '企业名称', type: 'input', prop: 'enterpriseName' },
  { label: '企业地址', type: 'address', prop: 'enterpriseAddress' },
  { label: '详细地址', type: 'textarea', prop: 'detailAddress' },
  {
    label: '企业所属行业',
    type: 'select',
    prop: 'industry',
    options: [
      { value: '农、林、牧、渔业', label: '农、林、牧、渔业' },
      { value: '采矿业', label: '采矿业' },
      { value: '制造业', label: '制造业' },
      {
        value: '电力、热力、燃气及水的生产和供应业',
        label: '电力、热力、燃气及水的生产和供应业'
      },
      { value: '环境和公共设施管理业', label: '环境和公共设施管理业' },
      { value: '建筑业', label: '建筑业' },
      { value: '教育', label: '教育' },
      { value: '交通运输、仓储业和邮政业', label: '交通运输、仓储业和邮政业' },
      {
        value: '信息传输、计算机服务和软件业',
        label: '信息传输、计算机服务和软件业'
      },
      { value: '批发和零售业', label: '批发和零售业' },
      { value: '住宿、餐饮业', label: '住宿、餐饮业' },
      { value: '金融、保险业', label: '金融、保险业' },
      { value: '房地产业', label: '房地产业' },
      { value: '租赁和商务服务业', label: '租赁和商务服务业' },
      {
        value: '科学研究、技术服务和地质勘查业',
        label: '科学研究、技术服务和地质勘查业'
      },
      { value: '水利', label: '水利' },
      { value: '居民服务和其他服务业', label: '居民服务和其他服务业' },
      {
        value: '卫生、社会保障和社会服务业',
        label: '卫生、社会保障和社会服务业'
      },
      { value: '文化、体育、娱乐业', label: '文化、体育、娱乐业' },
      {
        value: '综合（含投资类、主业不明显）',
        label: '综合（含投资类、主业不明显）'
      },
      { value: '其它', label: '其它' }
    ]
  },
  { label: '企业详情', type: 'textarea', prop: 'detail' },
  { label: '坐标', type: 'input', prop: 'position',readonly:true},
  {
    label: '联系电话',
    type: 'input',
    prop: 'phone'
  }
]
const btnOptStudent = [
  {
    name: '取消',
    btnType: 'info',
    prop: 'cancel'
  },
  {
    name: '注册',
    btnType: 'primary',
    prop: 'register'
  }
]
function switchLogin() {
  router.push('/login')
}
function handleForm(type, data) {
  // console.log(data);
  
  if (type === 'register') {
    register(data)
  }
}
async function register(data) {
  const res = await enetrpriseApi(data)
  showStatusMessage(res)

  setTimeout(() => {
    router.push('/login')
  }, 1000)
}
</script>

<template>
  <div class="register-wrapper">
    <div class="bg-overlay"></div>
    <div class="content-container">
      <div class="left-section">
        <div class="slogan-box">
          <h1 class="main-slogan">校企合作共赢</h1>
          <h2 class="sub-slogan">人才培养助力</h2>
          <div class="slogan-description">
            <p>加入我们的平台，链接优质校园人才</p>
            <p>我们为企业提供专业的校园招聘解决方案</p>
          </div>
        </div>
        <div class="feature-boxes">
          <div class="feature-box">
            <i class="el-icon-user"></i>
            <h3>校园人才</h3>
            <p>优质在校生资源</p>
          </div>
          <div class="feature-box">
            <i class="el-icon-office-building"></i>
            <h3>招聘发布</h3>
            <p>便捷职位发布</p>
          </div>
          <div class="feature-box">
            <i class="el-icon-service"></i>
            <h3>专业服务</h3>
            <p>校企对接服务</p>
          </div>
        </div>
      </div>

      <div class="right-section">
        <div class="form-container">
          <div class="form-header">
            <h2 class="title">企业账号注册</h2>
            <p class="welcome-text">欢迎加入我们的平台!</p>
          </div>
          <FormAdd
            ref="formRef"
            :data="form"
            :formOpt="studentFormOpt"
            :btnOpt="btnOptStudent"
            @handleForm="handleForm"
            isShowMap
          ></FormAdd>
       
          <div class="login-link">
            已有账号？<span class="login-btn" @click="switchLogin">立即登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.register-wrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;

  .bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
  }

  .content-container {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 40px;
  }

  .left-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 60px;

    .slogan-box {
      color: #fff;
      margin-bottom: 60px;

      .main-slogan {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 20px;
        font-family: 'DLB';
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }

      .sub-slogan {
        font-size: 36px;
        margin-bottom: 30px;
        font-family: 'DLB';
        color: #0c87f3;
      }

      .slogan-description {
        font-size: 18px;
        line-height: 1.6;
        opacity: 0.9;
      }
    }

    .feature-boxes {
      display: flex;
      gap: 30px;

      .feature-box {
        flex: 1;
        background: rgba(255, 255, 255, 0.1);
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        backdrop-filter: blur(10px);
        transition: transform 0.3s;

        &:hover {
          transform: translateY(-5px);
        }

        i {
          font-size: 36px;
          color: #0c87f3;
          margin-bottom: 15px;
        }

        h3 {
          color: #fff;
          font-size: 20px;
          margin-bottom: 10px;
        }

        p {
          color: rgba(255, 255, 255, 0.8);
          font-size: 16px;
        }
      }
    }
  }

  .right-section {
    width: 1100px;
    display: flex;
    align-items: center;
    overflow: hidden;

    .form-container {
      width: 100%;
      background: rgba(255, 255, 255, 0.95);
      padding: 40px;
      border-radius: 20px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      animation: fadeIn 0.9s ease-out;

      .form-header {
        text-align: center;
        margin-bottom: 30px;
        animation: slideDown 0.5s ease-out;

        .title {
          font-size: 32px;
          color: #333;
          margin-bottom: 15px;
          font-family: 'DLB';
          font-weight: 600;
          background: linear-gradient(45deg, #0c87f3, #05c3ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .welcome-text {
          font-size: 18px;
          color: #666;
          letter-spacing: 1px;
        }
      }

      .login-link {
        text-align: center;
        margin-top: 25px;
        color: #666;
        font-size: 15px;

        .login-btn {
          color: #0c87f3;
          cursor: pointer;
          font-weight: 500;
          text-decoration: none;
          transition: all 0.3s ease;
          margin-left: 5px;
          padding: 5px 10px;
          border-radius: 4px;

          &:hover {
            color: #05c3ff;
            background: rgba(12, 135, 243, 0.1);
          }
        }
      }
     
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}
</style>
